<template>
  <view class="props-form">
    <view v-for="(item, index) in formData" :key="index" class="props-form-item">
      <view class="props-form__top">
        <view class="input-wrap">
          <input v-if="isModify(index)" v-model="item.key" focus type="text" placeholder="请输入商品规格" @blur="removeModify(index)" />
          <text v-else>{{ item.key }}</text>
        </view>
        <view class="btn-wrap">
          <text v-if="!isModify(index)" @click="modifys.push(index)">修改</text>
        </view>
      </view>
      <view class="props-values-wrap">
        <view class="select-btns-wrap">
          <SelectBtn
            v-for="(val) in item.specs"
            :key="val"
            :name="val"
            :selected="item.values.includes(val)"
            width="32%"
            @click.native="handleClickPropBtn(item,val)"
          />
          <view style="height:0;width:32%"></view>
        </view>
        <view class="action-btn-wrap">
          <SelectBtn name="添加选项" width="32%" type="button" @click.native="handleOpenPropDialog(index)" />
        </view>
        <view class="action-btn-wrap delete-btn-wrap">
          <view class="delete-btn" @click="removeProp(index)">
            <text>删除该属性</text>
          </view>
        </view>
      </view>
    </view>
    <PropDialog ref="propDialog" @submit="(name)=>addPropVal(name)" />
  </view>
</template>

<script>
import SelectBtn from "../../../components/public/PropSelect/SelectBtn.vue";
import PropDialog from "./PropDialog.vue";
// import { mapState } from "vuex";
export default {
  components: {
    SelectBtn,
    PropDialog
  },
  props: {
    initData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      modifys: [],
      formData: [
        // {
        //   key: "",
        //   values: [
        //    "",""
        //   ]
        // }
      ],
      propIndex: null
    };
  },
  created() {
    if (this.initData.length > 0) {
      this.initData.forEach(v => {
        this.addProp(v.key, v.values);
      });
    }
  },
  methods: {
    handleClickRemove(index) {
      this.formData.values.splice(index, 1);
    },
    setData(data) {
      this.formData = this.$deepStr(data);
    },
    /**
     * @param {string} key key值
     * @param {array} s 规格数组
     */
    addProp(key, s = []) {
      let index = this.formData.findIndex(v => v.key == key);
      if (index == -1) {
        this.formData.push({
          key,
          specs: this.$deepStr(s),
          values: this.$deepStr(s)
        });
      }
    },
    // 对外公开的移除方法
    deleteProp(key) {
      let index = this.formData.findIndex(v => v.key == key);
      if (index > -1) this.removeProp(index);
    },
    // 基础移除方法
    removeProp(index) {
      this.formData.splice(index, 1);
    },
    // 添加属性值
    addPropVal(name) {
      let hasName = this.formData[this.propIndex].specs.some(v => v == name); // 是否已经存在
      if (!hasName) {
        this.formData[this.propIndex].specs.push(name);
        this.formData[this.propIndex].values.push(name);
      } else {
        uni.showToast({
          icon: "none",
          title: "已存在该属性值"
        });
      }
    },
    getData() {
      let validate = true;
      this.formData.forEach(v => {
        if (v.key === null || v.key === "" || v.key === undefined) {
          uni.showToast({
            title: "请填写商品属性",
            icon: "none"
          });
          validate = false;
          return false;
        }
        if (v.values.length == 0) {
          uni.showToast({
            title: "请填写商品属性选项",
            icon: "none"
          });
          validate = false;
          return false;
        }
      });
      return validate ? this.formData : false;
    },
    isModify(index) {
      return this.modifys.includes(index);
    },
    removeModify(index) {
      this.modifys.splice(index, 1);
    },
    // 当点击属性按钮时
    handleClickPropBtn(item, prop) {
      let index = item.values.indexOf(prop);
      if (index > -1) {
        item.values.splice(index, 1);
      } else {
        item.values.push(prop);
      }
    },
    handleOpenPropDialog(index) {
      this.propIndex = index;
      this.$refs.propDialog.open();
    }
  }
};
</script>

<style scoped lang="scss">
.props-form {
  margin-top: 50rpx;
  .props-form__top {
    display: flex;
    justify-content: space-between;
    font-size: $uni-font-size-lg;
    // .input-wrap {
    // }
    .btn-wrap {
      font-size: $uni-font-size-lg;
      color: $uni-color-primary;
    }
    margin-bottom: 20rpx;
    padding: 10rpx 0;
    border-bottom: 1px solid $uni-border-color;
  }
  .props-values-wrap {
    // background-color: tan;
    // .action-btn-wrap {
    // }
    .delete-btn-wrap {
      text-align: center;
      .delete-btn {
        display: inline-block;
        font-size: $uni-font-size-base;
        color: $uni-color-error;
      }
    }
  }
  .select-btns-wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
